<!-- template inhertance -->
<extend name="layout/layui24"/>

<!-- styles -->
<block name="linkcss">
    <link rel="stylesheet" href="/Public/home/css/userCenter/user.css">
</block>

<!-- scripts -->
<block name="linkjs">

</block>

<!-- page title -->
<block name="webtitle">
    <title>自定义快捷方式</title>
</block>

<!-- navagations -->
<block name="breadcrumb">
    <ol class="breadcrumb breadcrumb-edit">
        <li><a href="index">个人中心</a></li>
        <li class="active">自定义快捷方式</li>
    </ol>
</block>

<!-- main body -->
<block name="content">
    <div class="shortcut">
        <!--选项 -->
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="clearfix text-muted">
                    <i class="icon-asterisk"></i>
                    温馨提示：点击可选中，再次点击可取消选中！
                </div>
            </div>
            <div class="panel-body">
                <div class="clearfix">
                    <div class="shortcut-item">
                        <!--foreach start渲染快捷方式-->
                        <volist name="shortcut" id="vo">
                            <a href="" class="quick-link" data-id="{$vo.id}">{//vo.id为每个快捷方式的id}
                                {//如果该快捷方式是用户首页本身已有的快捷方式则默认选中增加名为checked的class}
                                <eq name="vo.checked" value="1">
                                    <div class="quick-link-icon checked">
                                        {//为每个快捷方式对应的图标}
                                        <i class="icon-list-alt"></i>
                                    </div>
                                    <div class="quick-link-text">{$vo.name}</div>{//vo.name为每个快捷方式的名称}
                                    <else/>
                                    <div class="quick-link-icon">
                                        {//为每个快捷方式对应的图标}
                                        <i class="icon-list-alt"></i>
                                    </div>
                                    <div class="quick-link-text">{$vo.name}</div>{//vo.name为每个快捷方式的名称}
                                </eq>
                            </a>
                        </volist>
                        <!--foreach end-->
                    </div>
                </div>
            </div>
        </div>
        <!--操作按钮 -->
        <div>
            <button class="layui-btn" id="save">保存</button>
            <a href="javascript:location.reload()" class="layui-btn layui-btn-primary">重置</a>
            <a href="javascript:history.back()" class="layui-btn layui-btn-danger">返回</a>
        </div>
    </div>
    <script>
        $(function () {
            layui.use("layer",function () {
                var layer = layui.layer;

                var selectedId = [];  //用于存选中的快捷方式的id

                //循环获取初始已被选中的id
                $(".quick-link").each(function () {
                    if ($(this).find(".quick-link-icon").is(".checked")) {
                        selectedId.push($(this).attr("data-id"));
                    }
                });

                //点击选中再次点击取消选中(通过class：checked区分)
                $("a.quick-link").click(function (e) {

                    e.preventDefault();  //阻止默认事件
                    var data_id = $(this).attr("data-id");  //获取当前点击的选项的id

                    //判断data-id是否有值
                    if(typeof data_id === 'undefined') {
                        return false;
                    }

                    //标识选中未选中
                    $(this).find(".quick-link-icon").toggleClass("checked");

                    if($(this).find(".quick-link-icon").is(".checked")) {
                        selectedId.push(data_id); //存入id
                    } else {
                        var index = $.inArray(data_id,selectedId); //在数组中查找指定值，并返回它的索引值,若没找到返回-1
                        if (index >= 0)
                        {
                            selectedId.splice(index ,1); //删除指定元素
                        } else {
                            layer.msg('数组中不包含该元素！',{icon: 2,time:1000});
                        }
                    }
                });

                //保存事件
                $("#save").click(function () {
                    if (selectedId.length > 0) {
                        console.log(selectedId);
                        $.post("/Posts/post", JSON.stringify(selectedId), function (response) {
                            if (response.code === 0) {
                                layer.msg('自定义修改成功',{icon: 1});
                                location.reload();
                            } else {
                                layer.msg(response.msg, {icon: 2});
                            }
                        },'json');
                    } else {
                        layer.msg("您未选择快捷方式！", {icon: 2});
                    }
                })

            })
        })
    </script>
</block>